<script setup>
  import { ref } from 'vue';
  import Head from './components/Head.vue';
  import Navigator from './components/Navigator.vue';
  import Content from './components/Content.vue';

  let menu = ref('') // 定义一个响应式数据接收Navigator的sendMenu事件传来的参数
  
  function receiver(data) { // data接收sendMenu事件带来的参数
    menu.value = data
  }
</script>

<template>
  <div>
    <Head class="Head"></Head>

    <!-- 这里的事件sendMenu就是在Navigator组件中定义的事件，因为在Navigator中定义了sendMenu事件，所以才能在这里给sendMenu事件绑定函数，
     这里自定义一个方法receive，这个方法在这里调用时是没有()的，当Navigator中的sendMenu事件发生后，自动执行receive方法 -->
    <Navigator class="Navigator" v-on:sendMenu="receiver"></Navigator>

    <!-- 在上面已经将Navigator传给App的参数赋值给响应式数据menu了，这里给Content组件自定义一个属性message，将Navigator传来的值作为属性
     值赋值给message。其实这个message属性是在Content组件中通过defineProps方法定义的，那么在Content组件中就可以使用自定义的属性message
     获取其属性值，从而获得从Navigator组件中传来的数据 -->
    <Content class="Content" v-bind:message="menu"></Content>
  </div>
  
</template>

<style scoped>
  .Head{
    height: 100px;
    border: 1px solid red;
  }
  .Navigator{
    height: 700px;
    width: 15%;
    border: 1px solid green;
    float: left;
  }
  .Content{
    height: 700px;
    width: 84%;
    border: 1px black solid;
    float: right;
  }
</style>
